<template>
  <div class="invite">
    <div class="title">
      <div class="item" :class="{'active_item':currentItem=='all'}" @click="invite_item('all')">
        所有成员
        <br>(
        <span v-text="inviteAll.AllTotal?inviteAll.AllTotal:'0'"></span> )
      </div>
      <div class="item" :class="{'active_item':currentItem=='noAll'}" @click="invite_item('noAll')">
        直推成员
        <br>(
        <span v-text="inviteAll1.ZTLBTotal?inviteAll1.ZTLBTotal:'0'"></span> )
      </div>
      <div class="item" :class="{'active_item':currentItem=='baby'}" @click="invite_item('baby')">
        章鱼宝宝
        <br>(
        <span v-text="inviteAll2.ZTLBTotal?inviteAll2.ZTLBTotal:'0'"></span> )
      </div>
    </div>
    <template v-if="currentItem=='all'">
      <div
        ref="wrapper"
        :style="{'-webkit-overflow-scrolling': scrollMode,height:'9rem',overflow:'scroll'}"
      >
        <v-loadmore
          :bottom-method="loadBottom"
          :bottom-all-loaded="allLoaded"
          :auto-fill="false"
          ref="loadmore"
        >
          <ul class="invite_wrap">
            <li v-for="(item ,index) in inviteArr" :key="index">
              <div class="icon">
                <img src="../../../assets/img/ps_1.png" alt>
              </div>
              <div class="half">
                <div class="tit">{{item.NickName}}</div>
                <div class="phone">电话：{{item.Accounts.substr(0,3)+"****"+item.Accounts.substr(7)}}</div>
              </div>
              <div class="half halfR">
                <div class="time">注册时间{{(item.RegisterDate).toString().split(' ')[0]}}</div>
                <div class="btn">
                  <span v-if="item.Dj=='0'">章鱼矿工</span>
                  <span v-if="item.Dj=='1'">以太矿工</span>
                  <span v-if="item.Dj=='2'">比特矿工</span>
                </div>
              </div>
            </li>
          </ul>
        </v-loadmore>
      </div>
    </template>
    <template v-else-if="currentItem=='noAll'">
      <direct></direct>
    </template>
    <template v-else>
      <baby></baby>
    </template>
  </div>
</template>
<script>
import { Loadmore } from "mint-ui";
import { GetYaoQing } from "../../../api";
import { getGuid } from "../../../utils/index";
import direct from "./direct";
import Baby from "./baby";
import { Toast } from "mint-ui";

export default {
  data() {
    return {
      currentItem: "all",
      inviteArr: [],
      scrollMode: "touch", //移动端弹性滚动效果，touch为弹性滚动，auto是非弹性滚动
      allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉，就是不让往上划加载数据了
      totalpage: 0, //一共多少页数
      pageNo: 0,
      pageSize: 8,
      inviteAll: {},
      inviteAll1: {},
      inviteAll2: {},
      id: localStorage.zyUserId,
      contentH: 0
    };
  },
  props: {},
  components: {
    "v-loadmore": Loadmore,
    direct,
    Baby
  },
  created() {
    this.loadPageList(this.pageNo, "all"); //初次访问查询列表
    this.loadPageList(this.pageNo, "noAll");
    this.loadPageList(this.pageNo, "baby");
  },
  mounted() {
    this.$nextTick(function() {
      this.contentH =
        document.documentElement.clientHeight -
        this.$refs.wrapper.getBoundingClientRect().top;
    });
  },
  methods: {
    loadBottom: function() {
      // 上拉加载
      this.more(this.currentItem); // 上拉触发的分页查询
      this.$refs.loadmore.onBottomLoaded(); // 固定方法，查询完要调用一次，用于重新定位
    },
    more(type) {
      // 分页查询
      if (type == "all") {
        if (this.totalpage == 1) {
          this.pageNo = 1;
          this.allLoaded = true;
        } else {
          this.pageNo = parseInt(this.pageNo) + 1;
          this.allLoaded = false;
        }
        this.loadPageList(this.pageNo, type); //初次访问查询列表
      }
    },
    loadPageList(pageNo, type) {
      let _type = 0;
      if (type == "all") {
        _type = 0;
      } else if (type == "noAll") {
        _type = 1;
      } else {
        _type = 2;
      }
      GetYaoQing({
        ID: this.id,
        LoginMachine: getGuid(),
        YJEYhOld: "",
        YJEYhNew: "",
        PageSize: this.pageSize,
        PageNo: pageNo,
        RegType: _type
      }).then(res => {
        if (res.data.Success) {
          if (type == "all") {
            if (!res.data.EntityList[0].AllTotal) {
              Toast({
                message: "暂无数据",
                duration: 2000
              });
              return;
            }
            this.totalpage = Math.ceil(
              res.data.EntityList[0].AllTotal / this.pageSize
            );
            this.inviteAll = Object.assign(
              this.inviteAll,
              res.data.EntityList[0]
            );
            res.data.EntityList[0].ALLVlue.forEach(item => {
              this.inviteArr.push(item);
            });
          } else if (type == "noAll") {
            this.inviteAll1 = res.data.EntityList[0];
          } else {
            this.inviteAll2 = res.data.EntityList[0];
            console.log(res);
          }
        } else {
          Toast({
            message: res.data.Content,
            duration: 3000
          });
        }
        this.$nextTick(function() {
          this.scrollMode = "touch";
        });
      });
    },
    invite_item(type) {
      this.currentItem = type;
    }
  }
};
</script>
<style lang="stylus" scoped>
.invite {
  width: 7.04rem;
  background: #FFF;
  border-radius: 0.2rem;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0.25rem;
  margin-bottom: 10px;

  .title {
    text-align: center;
    display: flex;
    line-height: 25px;
    margin-bottom: 20px;

    .item {
      flex-grow: 1;
    }

    .active_item {
      color: #D6A163;
    }
  }

  .invite_wrap {
    width: 100%;

    li {
      display: flex;
      height: 0.82rem;
      margin-bottom: 15px;

      .icon {
        flex: 0 1 0.72rem;
        width: 0.72rem;
        height: 0.73rem;
        border-radius: 50%;
        margin-right: 10px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .halfR {
        text-align: right;
        position: relative;

        .btn {
          position: absolute;
          right: 0;
          bottom: 0;
        }
      }

      .half {
        flex: 1;
        display: flex;
        flex-direction: column;

        .txt {
          font-size: 13px;
          line-height: 0.7rem;
          color: #4E5063;
        }

        .phone {
          font-size: 10px;
          line-height: 0.5rem;
          color: #4E5063;
        }

        .time {
          font-size: 10px;
          color: #919191;
        }

        .btn {
          width: 1.59rem;
          height: 0.44rem;
          line-height: 0.44rem;
          text-align: center;
          background: #4E5063;
          border-radius: 0.22rem;
          margin-top: 5px;
          font-size: 14px;
          color: #D6A163;
        }
      }
    }
  }
}
</style>

